<template>
  <div class="container" v-if="show">
    <div class="dialog">
      <div class="title">签到成功</div>
      <div class="calendar">
        <div class="weeks">
          <div class="week" v-for="(item, index) in weeks" :key="index">{{item}}</div>
        </div>
        <div class="days">
          <div class="day" v-for="(item, index) in days" :data-day="JSON.stringify(days)" :key="index">
            <span v-if="item.day==7">
              <img v-if="signDate.indexOf(nowYearMonth+'0')>=0" src="../assets/imgs/home/icon-coupon@2x.png" alt="">
              <img v-else src="../assets/imgs/home/icon-uncoupon@2x.png" alt="">
            </span>
            <span v-else-if="item.day==15">
              <img v-if="signDate.indexOf(nowYearMonth+'15')>=0" src="../assets/imgs/home/icon-coupon@2x.png" alt="">
              <img v-else src="../assets/imgs/home/icon-uncoupon@2x.png" alt="">
            </span>
            <span v-else-if="item.day==(days.length-emptyDay)">
              <img  v-if="signDate.indexOf(nowYearMonth+item.day)>=0" src="../assets/imgs/home/icon-coupon@2x.png" alt="">
              <img v-else src="../assets/imgs/home/icon-uncoupon@2x.png" alt="">
            </span>
            <span class="text" v-else :class="{'on': item.state}">{{item.day}}</span>
          </div>
        </div>
        <div class="signContent">
          <div class="isSign" :class="{'user': userInfo.avatar}">
            <img class="userimg" :src="userInfo.avatar" v-if="userInfo.avatar" alt="">
            您已成功签到<span v-if="signDate.length">{{signDate.length}}</span>天
          </div>
          <div class="integral">*明天签到可获得{{signData.nextSignScore}}积分*</div>
        </div>
      </div>
      <div class="close" @click="closeDialog"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      days: [],
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      signData: {},
      emptyDay: 0,
      nowYear: '',
      nowMonth: '',
      nowYearMonth: '',
      signDate: [] // 签到日期数组
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'mine/userInfo'
    })
  },
  mounted () {
    this.initCalendar();
  },
  methods: {
    ...mapActions({
      getSign: 'home/getSign'
    }),
    initCalendar () {
      const now = new Date();
      const nowYear = now.getFullYear();
      const nowMonth = now.getMonth() + 1;
      const nowMonthDays = this.getMonthDays(nowYear, nowMonth - 1);
      const monthFirstDayWeek = this.getWeekByDay(nowYear, nowMonth);
      this.nowYear = '' + nowYear;
      this.nowMonth = nowMonth < 10 ? '0' + nowMonth : nowMonth;
      this.emptyDay = monthFirstDayWeek;
      this.nowYearMonth = this.nowYear + this.nowMonth;
      const days = [];
      for (let i = 0; i < monthFirstDayWeek; i++) {
        days.push({})
      }
      const curtMonth = nowMonth < 10 ? '0' + nowMonth : nowMonth;
      for (let j = 1; j <= nowMonthDays; j++) {
        const _j = j < 10 ? '0' + j : j;
        days.push({
          day: j,
          state: false,
          current: `${nowYear}${curtMonth}${_j}`
        })
      }
      this.days = days;
      this.getSignData();
    },
    getSignData () {
      this.getSign().then(res => {
        this.signData = res || {};
        const signDate = res.signDate || [];
        this.signDate = signDate;
        this.days.forEach(item => {
          if (signDate.includes(item.current)) {
            item.state = true;
          }
        })
      })
    },
    closeDialog () {
      this.$emit('close');
    },
    getMonthDays (nowYear, month) { // 获得某年某月的天数
      const monthStartDate = new Date(nowYear, month, 1);
      const monthEndDate = new Date(nowYear, month + 1, 1);
      const days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
      return days;
    },
    formatDate (date) {
      const myyear = date.getFullYear();
      let mymonth = date.getMonth() + 1;
      let myweekday = date.getDate();
      if (mymonth < 10) {
        mymonth = '0' + mymonth;
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday;
      }
      return myyear + '-' + mymonth + '-' + myweekday;
    },
    getWeekByDay (year, month, day = '01') { // dayValue=“2019-03-01”
      const dayValue = `${year}-${month}-${day}`;
      const days = new Date(Date.parse(dayValue.replace(/-/g, '/')));
      const today = ['0', '1', '2', '3', '4', '5', '6'];
      return today[days.getDay()];
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1001;
  .dialog {
    position: fixed;
    // top: 3.2rem;
    top: 22%;
    width: 5.76rem;
    left: 50%;
    margin-left: -2.88rem;
    background: #fff;
    border-radius: 0.2rem;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 1.13rem;
      font-size: 0.38rem;
      color: #fff;
      background-image: url("../assets/imgs/home/icon-checkin@2x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .calendar {
      // padding: 0.3rem 0.18rem;
      padding: 0.14rem 0.01rem 0.3rem;
      .weeks {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .week {
          width: 0.48rem;
          height: 0.48rem;
          line-height: 0.48rem;
          margin: 0.17rem;
          font-size: 0.32rem;
          color: #333;
          text-align: center;
        }
      }
      .days {
        display: inline-flex;
        flex-wrap: wrap;
        .day {
          width: 0.48rem;
          height: 0.48rem;
          margin: 0.1rem 0.17rem;
          font-size: 0.26rem;
          color: #333;
          text-align: center;
          .text {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-sizing: border-box;
            &.on {
              border: 0.01rem solid #333;
            }
          }
        }
        img {
          display: inline-block;
          width: 0.48rem;
          height: 0.48rem;
        }
      }
      .signContent {
        text-align: center;
        .isSign {
          display: inline-block;
          height: 0.60rem;
          line-height: 0.60rem;
          font-size: 0.28rem;
          color: #333;
          text-align: center;
          padding: 0 0.3rem;
          border-radius: 0.6rem;
          background: #F9DD00;
          &.user {
            padding-left: 0;
          }
          .userimg {
            width: 0.6rem;
            height: 0.6rem;
            margin-top: -0.04rem;
            border-radius: 50%;
          }
        }
        .integral {
          font-size: 0.22rem;
          color: #999;
          margin-top: 0.12rem;
        }
      }
    }
    .close {
      width: 0.45rem;
      height: 0.45rem;
      position: absolute;
      bottom: -0.85rem;
      left: 50%;
      margin-left: -0.27rem;
      background-image: url("../assets/imgs/home/icon-close@2x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}
</style>
